<template>
  <div>
    <div>
卡号头部：
<el-input v-model="input" placeholder="按卡号头部查询" >
</el-input>
    </div>
    <div>
<el-popover
  placement="top"
  width="500"
  v-model="visible">
  <p>添加新的卡号</p>
  卡号头部
  <el-input v-model="input"  ></el-input>
   卡类型<p>
   <el-dropdown split-button  @click="handleClick">
    <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item>双皮奶</el-dropdown-item>
    <el-dropdown-item>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
   </el-dropdown>
  <p>
     卡归属<p>
     <el-dropdown split-button @click="handleClick">
      <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item>双皮奶</el-dropdown-item>
    <el-dropdown-item>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
     </el-dropdown>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
  </div>
  <el-button slot="reference">+添加卡号</el-button>
</el-popover>
      </div>
  <div>
    归属：
    <el-radio v-model="radio" label="1">大客户</el-radio>
  <el-radio v-model="radio" label="2">代理</el-radio>
   <el-button  icon="el-icon-search">查询</el-button>
     <el-button icon="el-icon-refresh-left">重置</el-button>
  </div>
  <div>
    <el-table
    :data="tableData"
   >
    <el-table-column
      prop="date"
      label="ID"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="卡号头部"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="卡类型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="归属"
      width="120">
    </el-table-column>
    <el-table-column
     prop="cz"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" >编辑</el-button>
        <el-button >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
      </div>
</template>
<script>
export default {
  data() {
    return {
      input: '',
       visible: false,
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          cz:""
         
        }]
    
    }
  },
   methods: {
      handleClick() {
        alert('button click');
      },
      handleClick(row) {
        console.log(row);
      }
    }
   }

</script>

